﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>陵县供水管网</title>
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="stylesheet" href="http://111.30.72.13/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="http://111.30.72.13/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css" />
    <style>
        html, body, #mapDiv
        {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #Header{
            background-color:#fff;
            font-size: 1em;
            font-family: sans-serif;
            padding-left: 5em;
            padding-top:1px;
            margin: 1px;
            color:#660000;
        }
        #HomeButton{
            position:absolute;
            top: 95px;
            left: 20px;
            z-index: 50;
        }

        #info{
            position: absolute;
            bottom: 10px;
            left: 20px;
            z-index: 50;
        }
        .dj_ie .infowindow .window .top .right .user .content { position: relative; }
        .dj_ie .simpleInfoWindow .content { position: relative; }
    </style>
    <script src="js/jquery-2.1.1.js"></script>
    <script src="js/json2.js"></script>
    <!-- 配置dojo环境，parseOnLoad为true 且要此句要放在 v3.3 init.js前面-->
    <script type="text/javascript">var djConfig = { parseOnLoad: true };</script>
    <script src="http://111.30.72.13/arcgis_js_api/library/3.9/3.9/init.js"></script>
    <script type="text/javascript">
        var json;
        var symbol;
        var map;
        require(["dojo/parser", "esri/geometry/Extent", "esri/Color", "esri/map", "esri/layers/ArcGISTiledMapServiceLayer",
                    "esri/geometry/Point", "esri/SpatialReference", "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "dojo/store/JsonRest", "esri/dijit/HomeButton", "esri/dijit/OverviewMap","esri/dijit/Scalebar", "dojo/domReady!"],
                function (parser, Extent, Color, Map, ArcGISTiledMapServiceLayer, Point, SpatialReference, Graphic, InfoTemplate, SimpleMarkerSymbol, SimpleLineSymbol, JsonRest,HomeButton,OverviewMap,Scalebar) {
                    parser.parse();

                map = new Map("mapDiv", {
                    logo: false,
                    center: [467424.1525, 4136804.3113],
                    zoom: 2
                });
                    var home = new HomeButton({
                        map: map
                    }, "HomeButton");
                    home.startup();

                    var overviewMapDijit = new OverviewMap({
                        map: map,  //必要的
                        attachTo: "bottom-right", //放置位置
                        color: "#D84E13", //设置颜色
                        opacity: .40,  //透明度
                        visible: true,  //初始化可见
                        width: 250,  //默认值是地图高度的 1/4th
                        height: 210,  // 默认值是地图高度的 1/4th
                        //maximizeButton:true,   // 最大化,最小化按钮，默认false
                        expandFactor: 1.5 //概览地图和总览图上显示的程度矩形的大小之间的比例。默认值是2，这意味着概览地图将至少是两倍的大小的程度矩形。
                    });
                    overviewMapDijit.startup();

                    var scalebar = new Scalebar({
                        map: map,
                        // "dual" displays both miles and kilmometers
                        // "english" is the default, which displays miles
                        // use "metric" for kilometers
                        scalebarUnit: "metric",
                        attachTo: "bottom-left",
                    });
                var agoServiceURL = "http://111.30.72.13:6080/arcgis/rest/services/陵县供水管网20151108/MapServer";
                var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL);
                map.addLayer(agoLayer);

                var infoTemplate = new InfoTemplate("${didianming}", "${fubiaozhi}", "${guanwangyali}");
                var symbol1 = new SimpleMarkerSymbol(
                  SimpleMarkerSymbol.STYLE_CIRCLE,
                  12,
                  new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_SOLID,
                    new Color([0, 0, 255, 0.9]),
                    1
                  ),
                  new Color([0, 0, 255])
                );
                var symbol2 = new SimpleMarkerSymbol(
                  SimpleMarkerSymbol.STYLE_CIRCLE,
                  12,
                  new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_SOLID,
                    new Color([0, 255, 0, 0.9]),
                    1
                  ),
                  new Color([0, 255, 0])
                );
                var symbol3 = new SimpleMarkerSymbol(
  SimpleMarkerSymbol.STYLE_CIRCLE,
  12,
  new SimpleLineSymbol(
    SimpleLineSymbol.STYLE_SOLID,
    new Color([255, 0, 0, 0.9]),
    1
  ),
  new Color([255, 0, 0])
);


                map.on("load", addPointGraphics);


                    map.on('mouse-move', showCoordinates);
                    map.on('mouse-drag', showCoordinates);
                    //方法一.显示地图坐标
                    function showCoordinates(evt) {
                        var mp = evt.mapPoint;
                        dojo.byId("info").innerHTML = "坐标：" + mp.x.toFixed(4) + " , " + mp.y.toFixed(4);  //toFiex(2) 限制小数点后显示的位数
                    }
                /*function addPointGraphics() {
                    $.ajax({
                        type: "POST",
                        url: "getAllPoints.ashx",

                        success: function (response) {
                            json = eval('[' + response + ']');
                            var str = '';
                            for (var i = 0, l = json.length; i < l; i++) {
                                //console.log("json: " + json[i]['ZDID'] + "<br/> ZBX: " + json[i]['ZBX'] + "<br/> ZBY: " + json[i]['ZBY'] + json[i]['ZDMS']);
                                var attr = {
                                    "ZDBH": json[i].ZDBH,
                                    "ZDID": json[i].ZDID,
                                    "ZDMS": json[i].ZDMS,
                                    "XSZT": json[i].XSZT
                                };
                                //var loc = new Point(items[i].x, items[i].y, new SpatialReference({ wkid: 4326 }));
                                if ((json[i].ZDID < 500 && json[i].ZDID > 0) || json[i].ZDID > 600) {
                                    symbol = symbol1;
                                } else if (json[i].ZDID >= 600 ) {
                                    symbol = symbol2;
                                } else {
                                    symbol = symbol3;
                                }
                                var loc = new Point(json[i].ZBX, json[i].ZBY, new SpatialReference(map.spatialReference));
                                var graphic = new Graphic(loc, symbol, attr, infoTemplate);
                                map.graphics.add(graphic);
                            }

                        }
                    });
                    map.graphics.on("click", g_onMouseClick);
                }*/
                    function addPointGraphics() {
                        $.ajax({
                            type: "GET",
                            url: "http://222.133.60.178:809/getAllPoints.ashx",//http://222.133.60.178:809/
                            async: false,
                            dataType: "jsonp",
                            jsonp: "callbackparam",
                            jsonpCallback: "success_jsonpCallback",
                            success: function (response) {
                                var json = response;
                                var str = '';
                                for (var i = 0, l = json.length; i < l; i++) {
                                    var attr = {
                                        "ZDBH": json[i].ZDBH,
                                        "ZDID": json[i].ZDID,
                                        "ZDMS": json[i].ZDMS,
                                        "XSZT": json[i].XSZT
                                    };
                                    if ((json[i].ZDID < 500 && json[i].ZDID > 0) || json[i].ZDID > 600) {
                                        symbol = symbol1;
                                    } else if (json[i].ZDID >= 600) {
                                        symbol = symbol2;
                                    } else {
                                        symbol = symbol3;
                                    }
                                    var loc = new Point(json[i].ZBX, json[i].ZBY, new SpatialReference(map.spatialReference));
                                    var graphic = new Graphic(loc, symbol, attr, infoTemplate);
                                    map.graphics.add(graphic);
                                }

                            },
                            error: function (ex) {
                                //alert(ex);
                                alert('fail');
                                console.log(ex);

                            }
                        });
                        map.graphics.on("click", g_onMouseClick);
                    }
                //绑定提示框
                function g_onMouseClick(evt) {
                    if (evt.graphic.attributes) {
                        var ss = evt.graphic.attributes;
                        msg(ss, evt);
                    }
                }
            }
        );
        //提示框方法
        /*function msg(ss, evt) {
            var mainid = ss.ZDID;
            var maincode = ss.ZDBH;
            var mainstate = ss.XSZT;//元素的状态
            var data =
                {
                    ZDID: mainid,
                    ZDBH: maincode,
                    XSZT: mainstate
                };
            var ashx = '';
            if ((mainid < 500 || mainid >= 600) && mainstate == 0) {
                ashx = 'getPoint.ashx';
            }
            else {
                ashx = 'getLine.ashx';
            }
            $.ajax({
                type: "POST",
                url: ashx,
                data: data,
                success: function (response) {
                    if (response.indexOf("error:") > 0) {
                        map.infoWindow.setTitle("发生错误");//设置标题
                        map.infoWindow.setContent("错误明细" + response);
                    }
                    var json = jQuery.parseJSON(response);
                    var str = '';
                    map.infoWindow.setTitle("地点名称： " + ss.ZDMS);//设置标题
                    if ((mainid < 500 || mainid >= 600) && mainstate == 0) {
                        map.infoWindow.setContent('主键ID:' + mainid + "<br/> 设备号:" + maincode + "<br/> 记录时间:" + json.SJ + "<br/> 管网主表流量:" + json.lx_324 + "<br/> 管网副表流量:" + json.lx_325 + "<br/> 管网压力:" + json.lx_326 + "<br/> 管网电瓶电压:" + json.lx_327 + "<br/> 电源电压:" + json.lx_328 + "<br/> 瞬时流量:" + json.SSLL);
                    }
                    else {
                        //xian
                        if (mainstate == 1) {
                            map.infoWindow.setContent('主键ID:' + mainid + "<br/> 设备号:" + maincode + "<br/> 记录时间:" + json.SJ + "<br/> 总氯（二氧化氯）:" + json.lx_328 + "<br/> 余氯:" + json.lx_329 + "<br/> 浊度:" + json.lx_330 + "<br/> PH值:" + json.lx_331);
                        }
                        else {
                            map.infoWindow.setContent('主键ID:' + mainid + "<br/> 设备号:" + maincode + "<br/> 记录时间:" + json.SJ + "<br/> ORP:" + json.lx_332 + "<br/> 电导率:" + json.lx_333);
                        }
                    }
                    map.infoWindow.show(evt.screenPoint);//启动提示框
                    //alert(str);
                }
            });

        }*/

        function msg(ss, evt) {
            var mainid = ss.ZDID;
            var maincode = ss.ZDBH;
            var mainstate = ss.XSZT;//元素的状态
            var data =
            {
                ZDID: mainid,
                ZDBH: maincode,
                XSZT: mainstate
            };
            //alert(dataPath);
            if (mainstate == 0) { mainstate = 100;}
            var dataPath = '?ZDID=' + mainid + '&ZDBH=' + maincode + '&XSZT=' + mainstate;
            var ashx = '';
            if ((mainid < 500 || mainid >= 600) && mainstate == 100) {
                ashx = 'http://222.133.60.178:809/getPoint.ashx' + dataPath;//http://222.133.60.178:809/
            }
            else {
                ashx = 'http://222.133.60.178:809/getLine.ashx' + dataPath;//http://222.133.60.178:809/
            }
            // alert(ashx);
            $.ajax({
                type: "GET",
                url: ashx,
                async: false,
                dataType: "jsonp",
                jsonp: "callbackparam",
                jsonpCallback: "success_jsonpCallback",
                success: function (response) {
                    console.log(response);
                    if (response.indexOf("error:") > 0) {
                        map.infoWindow.setTitle("发生错误");//设置标题
                        map.infoWindow.setContent("错误明细" + response);
                    }
                    var json = response[0];//jQuery.parseJSON(response);

                    //alert(json.JS);
                    var str = '';
                    map.infoWindow.setTitle("地点名称： " + ss.ZDMS);//设置标题
                    if ((mainid < 500 || mainid >= 600) && mainstate == 100) {
                        map.infoWindow.setContent('主键ID:' + mainid + "<br/> 设备号:" + maincode + "<br/> 记录时间:" + json.SJ + "<br/> 管网主表流量:" + json.lx_324 + "<br/> 管网副表流量:" + json.lx_325 + "<br/> 管网压力:" + json.lx_326 + "<br/> 管网电瓶电压:" + json.lx_327 + "<br/> 电源电压:" + json.lx_328 + "<br/> 瞬时流量:" + json.SSLL);
                    }
                    else {
                        //xian
                        if (mainstate == 1) {
                            map.infoWindow.setContent('主键ID:' + mainid + "<br/> 设备号:" + maincode + "<br/> 记录时间:" + json.SJ + "<br/> 总氯（二氧化氯）:" + json.lx_328 + "<br/> 余氯:" + json.lx_329 + "<br/> 浊度:" + json.lx_330 + "<br/> PH值:" + json.lx_331);
                        }
                        else {
                            map.infoWindow.setContent('主键ID:' + mainid + "<br/> 设备号:" + maincode + "<br/> 记录时间:" + json.SJ + "<br/> ORP:" + json.lx_332 + "<br/> 电导率:" + json.lx_333);
                        }
                    }
                    map.infoWindow.show(evt.screenPoint);//启动提示框
                    //alert(str);
                },
                error: function (ex) {
                    //alert(ex);
                    alert('fail');
                    console.log(ex);

                }
            });

        }



    </script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width: 100%; height: 100%; margin:0;">

    <div id="Header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div style="float: left;font-size: 1.5em"><strong>陵城区供水管网GIS系统</strong></div>
        <div style="float: right; align-items: center;">图层列表 : <span id="layer_list1"><img src='images/zxszjcd.png' style='width: 15px;height: 15px'/><input type='checkbox' class='list_item' checked=checked /><label>在线水质监测点</label></span>&nbsp &nbsp &nbsp &nbsp &nbsp<span id="layer_list2"><img src='images/sbjcd.png' style='width: 15px;height: 15px'/><input type='checkbox' class='list_item' checked=checked /><label>水表监测点</label></span>&nbsp &nbsp&nbsp &nbsp</div>
        <!--<input type="Button" id="btngif" onclick="gifalert();" value="示意图"/>-->
    </div>
    <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0;position: relative;height: 100%;">
        <div id="HomeButton"></div>
        <span id="info" style="background-color:whitesmoke; font-weight:bolder; font-size:smaller; position:absolute; padding:2px;left:20px; bottom:2px; z-index:99;"></span>
    </div>
</div>
</body>
</html>
